<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<title>修改密碼視窗</title>

<link rel="stylesheet" href="../css/sunny/fontsize1.1/jquery-ui-1.10.4.custom.css">
<link rel="stylesheet" href="../css/jquery.validate.password.css">

<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/jquery-ui-1.10.4.custom.js"></script>
<script src="../js/jquery.validate.js"></script>
<script src="../js/messages_zh_TW.js"></script>
<script src="../js/jquery.validate.password.js"></script>

<style>
label {
	display: inline-block;
	width: 5em;
}

input.text {
	margin-bottom: 12px;
	width: 300px;
	padding: .4em;
	font-size: 14px;
	font-family: '微軟正黑體';
}

label.error {
	font-size: 16px;
	width: auto;
}
</style>

<script>
	$(function() {
		$("#summitbutton").hide();
		$("#oldpassword").change(function(){
			if((this).value != "") {
				$("#summitbutton").show();
			}
			else {
				$("#summitbutton").hide();
			}
		});
		$(document).tooltip();
		$(".buttonClass").button();
		$("#signupform").validate({
			success : function(label) {
				label.addClass("success").html("<img src='../images/check.png'>");
			},
			rules : {
				pwd : {
					maxlength : 18
				},
				pwd1 : {
					equalTo: "#password",
					minlength : 1
				},
			}
		});
		$("#summitbutton").click(function() {
			parent.$().message("密碼已修改");
		});
	});

//function chkEmail() {
//		var theEmail = document.getElementById("idEmail").value;
//		var re = /^\S+@\S+\.\S{2,3}$/;
//		//var re = new RegExp("/^\\S+@\\S+\\.\\S{2,3}$/")
//		if (!(re.test(theEmail))) {
//			alert("Email格式錯誤");
//		}
//	} 

</script>

</head>

<body>

	<form id="signupform" action="#" method="get"
		style="text-align:center; line-height: 24px; font-size: 18px; font-family: '微軟正黑體';">
		<p>
			<label for="oldpassword">舊密碼：</label><input id="oldpassword"
				type="password" name="oldpassword" placeholder="輸入舊密碼後會顯示送出鍵"
				class="text ui-widget-content ui-corner-all" style="width: 150px;">
		</p>
		<div style="position: relative;"><label for="password">新密碼：</label><input id="password"
			style="width: 150px;" type="password" name="pwd"
			placeholder="必須包含英、數"
			class="text ui-widget-content ui-corner-all passwordvalidate">
		<div class="password-meter"
			style="position: relative; left: 178px; top: -5px; z-index: -1;">
			<div class="password-meter-message"
				style="position: absolute; left: 0px; top: 3px;"></div>
			<div class="password-meter-bg">
				<div class="password-meter-bar"></div>
			</div>
		</div>
		</div><br/>
		<p>
			<label for="password1">確認密碼：</label><input id="password1"
				type="password" name="pwd1" placeholder="請重新輸入密碼"
				class="text ui-widget-content ui-corner-all" style="width: 150px;">
		</p>
		<input id="summitbutton" type="submit" value="送出 " class="buttonClass">
	</form>

</body>

</html>